<template>
    <view class="goods-item bg-white" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item, index)">
        <view
            style="width: 40rpx;height: 40rpx;text-align: center;line-height: 40rpx;background-color: #D8D8D8;color: #fff;border-radius: 40rpx;font-size: 32rpx;">
            {{ index + 1 }}
        </view>
        <view style="margin-left: 10rpx;box-sizing: border-box;flex: 1;">
            <view class="goods-info" style="font-size: 28rpx;">
                <view class="flex just-between">
                    <view class="goods-name bold" style="flex: 1;margin-bottom: 8rpx;">{{ item.goodsName }}</view>
                    <view style="color: #000;" class="flex align-center goods-quantity just-between bold"
                        v-if="item.locationCode">
                        <view>库位 {{ item.locationCode }}</view>
                    </view>
                    <view style="color: #000;" class="flex align-center goods-quantity just-between bold"
                        v-if="scope.confluenceLocationCode">
                        <view>库位 {{ scope.confluenceLocationCode }}</view>
                    </view>
                </view>
                <view class="flex just-between">
                    <view style="color: #626262;">
                        {{ item.goodsCode }}-{{ item.goodsBarcode }}
                    </view>
                </view>
                <view class="flex just-between" style="align-items:end">
                    <view class="flex">
                        <view class="goods-quantity" style="margin-right: 40rpx;font-size: 25rpx;">
                            应拣<text style="font-weight: bold;color: #000;margin-left: 4rpx;font-size: 36rpx;">x{{
        item.goodsNum }}</text></view>
                        <view class="goods-quantity" style="margin-right: 40rpx;font-size: 25rpx;">
                            实拣<text style="font-weight: bold;color: #000;margin-left: 4rpx;font-size: 36rpx">x{{
        item.num }}</text>
                        </view>
                        <view style="font-size: 25rpx;color: #626262;">缺货<text class="bold"
                                :style="{ 'color': item.stockoutNum == 0 ? '#000' : '#FF9519', 'margin-left': '4rpx', 'font-size': '36rpx' }">x{{
        item.stockoutNum }}</text></view>
                    </view>
                    <view v-if="scope?.pickTaskStatus == '1'">
                        <eui-status type="success" title="已拣" v-if="!!item.num && !item.stockoutNum" />
                        <eui-status type="invalid" title="未拣" v-if="!item.num && !item.stockoutNum" />
                        <eui-status type="warning" title="缺货" v-if="!!item.stockoutNum" />
                    </view>
                    <view v-if="scope?.pickTaskStatus == '2'">
                        <eui-status type="primary" title="已合流" v-if="item.confluenceStatus == '1'" />
                        <eui-status type="invalid" title="未合流" v-if="item.confluenceStatus == '0'" />
                    </view>
                    <view v-if="scope?.reviewTaskStatus">
                        <eui-status type="invalid" title="未复核" v-if="item?.reviewStatus == '0'" />
                        <eui-status type="primary" title="已复核" v-if="item?.reviewStatus == '1'" />
                        <eui-status type="invalid" title="待拣货" v-if="item?.reviewStatus == '2'" />
                        <eui-status type="invalid" title="待合流" v-if="item?.reviewStatus == '3'" />
                    </view>
                </view>
            </view>
        </view>
    </view>

</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { computed, defineProps } from 'vue';

const props = defineProps<{
    scope?: any;
    type?: string;
    goodsList?: any[];
}>()

const emit = defineEmits(['itemClick'])

const toDetail = (item: any, index: number) => {
    if (props.scope.pickTaskStatus == '2' && props.scope.confluenceStatus != '1' && !props.type) {
        uni.navigateTo({
            url: '/pages/BcmViews/PickTask/goodsMergeDetail?barcode=' + item.goodsBarcode + '&storeCode=' + props.scope.storeCode + '&id=' + props.scope.pickTaskNo
        })
    }
    if (props.scope.pickTaskStatus == '1') {
        emit('itemClick', index)
    }
}

</script>

<style lang="scss" scoped>
@import "../../common/common.css";

.goods-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx;
    border-bottom: 1rpx solid #e1e1e1;
}

.goods-info {
    align-items: baseline;
    // display: flex;
    flex: 1;
    padding-top: 10rpx 0;
    color: #000;
}

.goods-name {
    // margin-bottom: 2px;
    font-size: 28rpx;
    line-height: 35rpx;
}

.goods-price {
    // color: #626262;
    font-size: 28rpx;
    text-align: right;
}

.goods-quantity {
    color: #626262;
    font-size: 28rpx;
}
</style>